<template>
    <u-modal @confirm="onConfirm" @cancel="onVisibleChange(false)" :show="showModal" @close="onVisibleChange(false)" :showCancelButton="true"  :title="ruleForm.machineCode" >
        <view class="slot-content" style="width: 100%;">
            <view class="margin-bottom-10">
                <view>开始锭号:</view>
                <u-input v-model="ruleForm.startSpinNumber" type="number" :customStyle="{ border: 'solid 1px #dcdee2' }"></u-input>
            </view>
            <view class="margin-bottom-10">
                <view>结束锭号:</view>
                <u-input v-model="ruleForm.endSpinNumber" type="number" :customStyle="{ border: 'solid 1px #dcdee2' }"></u-input>
            </view>
            <view>
                <view>排序:</view>
                <u-input v-model="ruleForm.sortNum" type="number" :customStyle="{ border: 'solid 1px #dcdee2' }"></u-input>
            </view>
        </view>
    </u-modal>
</template>
<script>
    import {machineManagerMachineSpinGroupCreate, machineManagerMachineSpinGroupUpdate} from "../../../../../api";
    import {tipBar} from "../../../../../utils/jk-utils";

    export default {
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            modalState: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                ruleForm: {
                    id: null,
                    machineId: null,
                    machineCode: '',
                    machineName: '',
                    startSpinNumber: null,
                    endSpinNumber: null,
                },
                showModal: false
            };
        },
        methods: {
            onConfirm() {
                if (this.ruleForm.startSpinNumber && this.ruleForm.endSpinNumber) {
                    if (this.ruleForm.endSpinNumber > this.ruleForm.startSpinNumber) {
                        this.saveRequest();
                    } else {
                        uni.showToast({
                            title: '结束必须大于开始',
                            icon: 'error'
                        });
                    }
                } else {
                    uni.showToast({
                        title: '锭号不能为空',
                        icon: 'error'
                    });
                }
            },
            onVisibleChange(e) {
                if (!e) {
                    this.$set(this.ruleForm, 'id', null);
                    this.$set(this.ruleForm, 'machineId', null);
                    this.$set(this.ruleForm, 'machineCode', null);
                    this.$set(this.ruleForm, 'machineName', null);
                    this.$set(this.ruleForm, 'sortNum', null);
                    this.$set(this.ruleForm, 'startSpinNumber', null);
                    this.$set(this.ruleForm, 'endSpinNumber', null);
                }
                this.$emit('on-visible-change', e);
            },
            saveRequest() {
                let api = this.ruleForm.id ? machineManagerMachineSpinGroupUpdate : machineManagerMachineSpinGroupCreate;
                return api({
                    "id": this.ruleForm.id, // 锭组ID
                    "machineId": this.ruleForm.machineId,
                    "sortNum": this.ruleForm.sortNum,
                    "startSpinNumber": this.ruleForm.startSpinNumber,
                    "endSpinNumber": this.ruleForm.endSpinNumber,
                }).then(res => {
                    if (res.data.status === 200) {
                        tipBar('save');
                        this.$emit('confirm');
                    }
                });
            }
        },
        watch: {
            modalState(newVal) {
                this.showModal = newVal;
                if (newVal) {
                    this.ruleForm = JSON.parse(JSON.stringify(this.formData));
                }
            }
        }
    }
</script>
